<!-- 编辑 -->
<template>
	<el-dialog :close-on-click-modal="false" :close-on-press-escape="true" :title="state.form.id ? '编辑' : '新增'"
		v-model="isVisible" destroy-on-close width="500px" :draggable="true">
		<el-form ref="formRef" :model="state.form" :rules="rules" label-position="right" label-width="100px">
			<el-form-item label="设备厂商" prop="modelType">
				<el-radio-group v-model="state.form.modelType">
					<el-radio v-for="item in modelTypes" :label="item.value" :key="item.value">
						{{ item.label }}
					</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="设备固件" prop="firmware">
				<el-select v-model="state.form.firmware" placeholder="请选择固件版本">
					<el-option v-for="item in firmwareOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>

			<el-form-item label="版本号" prop="version">
				<el-input v-model="state.form.version" placeholder="请输入版本号" />
			</el-form-item>

			<el-form-item label="升级文件" prop="fileName">
				<el-input v-model="state.form.fileName" placeholder="请输入文件名称" />
			</el-form-item>

			<el-form-item label="文件大小" prop="filesize">
				<el-input-number v-model="state.form.filesize" :precision="2" :step="0.1" :min="0" />
				<span class="ml-2">MB</span>
			</el-form-item>

			<el-form-item label="MD5校验码" prop="md5">
				<el-input v-model="state.form.md5" placeholder="请输入MD5校验码" />
			</el-form-item>

			<el-form-item label="升级地址" prop="url">
				<el-input v-model="state.form.url" placeholder="请输入升级地址" />
			</el-form-item>

			<el-form-item label="备注" prop="remark">
				<el-input type="textarea" v-model="state.form.remark" placeholder="请输入备注信息" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button plain type="warning" @click="isVisible = false">取消</el-button>
			<el-button plain type="primary" @click="handleSubmit">确定</el-button>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup name="UpgradeEdit">
import { computed, reactive, ref, watch } from 'vue';
import upgradeApi from '/@/api/smoke/upgrade';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';

const emit = defineEmits(['close', 'success']);
const formRef = ref<FormInstance>();

const props = defineProps({
	dialogVisible: {
		type: Boolean,
		default: false,
	},
	rowData: {
		type: Object,
		default: () => ({}),
	},
});

// 设备厂商选项
const modelTypes = [
	{ value: 'M1', label: 'M1' },
	{ value: 'M3', label: 'M3' },
	{ value: 'M4', label: 'M4' },
];

// 固件版本选项
const firmwareOptions = [
	{ value: 'v1', label: 'v1' },
	{ value: 'v2', label: 'v2' },
	{ value: 'v3', label: 'v3' },
];

// 表单校验规则
const rules = reactive<FormRules>({
	modelType: [{ required: true, message: '请选择设备厂商', trigger: 'change' }],
	firmware: [{ required: true, message: '请输入固件版本', trigger: 'blur' }],
	version: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
	fileName: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
	filesize: [{ required: true, message: '请输入文件大小', trigger: 'blur' }],
	md5: [{ required: true, message: '请输入MD5校验码', trigger: 'blur' }],
	url: [{ required: true, message: '请输入升级地址', trigger: 'blur' }],
});

const state = reactive({
	form: initForm(),
});

const isVisible = computed({
	get: () => props.dialogVisible,
	set: () => close(),
});

// 监听对话框显示状态
watch(
	() => props.dialogVisible,
	(val) => {
		if (val) {
			state.form = initForm();
		}
	}
);

function initForm() {
	if (props.rowData && props.rowData.id) {
		return { ...props.rowData };
	}
	// 新增时的默认值
	return {
		id: undefined,
		modelType: '',
		firmware: 'v1',
		version: '',
		url: '',
		fileName: '',
		filesize: 0,
		md5: '',
		remark: '',
	};
}

// 提交表单
async function handleSubmit() {
	if (!formRef.value) return;

	await formRef.value.validate(async (valid) => {
		if (valid) {
			try {
				const postData = { ...state.form };

				if (postData.id) {
					await upgradeApi.modify(postData);
					ElMessage.success('更新成功');
				} else {
					await upgradeApi.create(postData);
					ElMessage.success('添加成功');
				}

				emit('success');
				emit('close');
			} catch (error) {
				ElMessage.error('操作失败');
			}
		}
	});
}

// 关闭对话框
function close() {
	emit('close');
}
</script>

<style scoped>
.ml-2 {
	margin-left: 8px;
}
</style>